<template>
<div class="shopcar-container"> 
    <div class="goods-list">
      <!-- 商品列表项区域 -->
      <div class="mui-card" v-for="(item,index) in goodsList" :key="index">
			<div class="mui-card-content" >
				<div class="mui-card-content-inner">			
                    <mt-switch :value="$store.getters.getGoodsSeleted[item.id]" @change="onChage(item.id)"></mt-switch>
                    <img :src="item.thumb_path">
                    <div class="info">
                    <h1>{{item.title}}</h1>
                    <p>
                        <span class="price">￥{{item.sell_price}}</span>
                        <numbox :initnumber="$store.getters.getGoodsCount[item.id]"></numbox>
                        <a href="#" @click.prevent="removeList(item.id,index)">删除</a>
                       
                    </p>
                    </div>
				</div>
	        </div>
	  </div>
   </div>

    <!-- 结算区域 -->
    <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
						<div class="left">
              <p>总计（不含运费）</p>
              <p>已勾选商品 <span class="red">{{$store.getters.getGoodsCountAndPrice.count}}</span> 件， 总价 <span class="red">￥{{$store.getters.getGoodsCountAndPrice.price}}</span></p>
            </div>
             <mt-button type="danger">去结算</mt-button>
					</div>
				</div>
			</div>


      <!--<p>asdsadaws</p>-->

  </div>
</template>
<script>
import numbox from '../swiper/car_number.vue' 
export default {
    data(){
        return {
            goodsList:[],
        }
    },
    created(){
        this.getShopCar();
        console.log(this.$store.state.shopCar)
         console.log(this.$store.getters.getGoodsSeleted)
    },
    methods:{  
        getShopCar(){  //将购物车中的产品的id 拼接成字符串
            var idArr = [];
            var str = '';
            this.$store.state.shopCar.forEach((element,index) => {
               idArr[index] =  element.id ;
            });
            str = idArr.join(',');
            // console.log(str);
            this.$http.get('api/goods/getshopcarlist/'+str).then(result=>{
                if(result.body.status ===0){
                    // console.log(result.body.message)
                    this.goodsList = result.body.message;
                }else{
                    alert("请求失败")
                }
            })
        },
        onChage(id){
          // alert(id)
          this.$store.commit('chageSelect',id);
        },
        removeList(id,index){
          // alert(id)
          // alert(index)
          this.goodsList.splice(index,1); //删除购物车页面的列表
          this.$store.commit('removeCarGoods',id); //删除购物车仓库的列表

        }
    },
    components:{
        numbox
    }
}
</script>
<style lang="scss" scoped>
   .shopcar-container {
    padding-top: 40px;
  background-color: #eee;
  overflow: hidden;
  .goods-list {
    .mui-card-content-inner {
      display: flex;
      align-items: center;
    }
    img {
      width: 60px;
    }
    h1 {
      font-size: 13px;
    }
    .info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .price {
        color: red;
        font-weight: bold;
      }
    }
  }
  .jiesuan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .red {
      color: red;
      font-weight: bold;
      font-size: 16px;
    }
  }
} 
</style>
